<template>
  <div class="app">
    <Child :list="list">
          <!-- 作用域名插槽：填坑  $row:是子组件回传数据，名字叫什么都可以，符合命名标识符规范-->
          <template slot-scope="{user}">
                 <h2 :style="{color:user.age>19?'red':'yellow'}">{{user.title}}---{{user.age}}</h2>
          </template>
    </Child>
  </div>
</template>

<script>
import Child from "./components/Child";
export default {
  name: "",
  data() {
    return {
      list: [
        { id: 1, title: "吃饭",age:12},
        { id: 2, title: "睡觉" ,age:34},
        { id: 3, title: "打豆豆",age:9},
        { id: 4, title: "人生" ,age:99},
      ],
    };
  },
  components: {
    Child,
  },
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
html,
body {
  width: 100%;
  height: 100%;
  background: yellowgreen;
}
.app {
  width: 100%;
  height: 100%;
}
</style>
